<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="lg" class="s-p-top"><img hidefocus="true" id="s_lg_img" class="index-logo-src"
            src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="270" height="129"
            onerror="this.src='//www.baidu.com/img/flexible/logo/pc/index.png';this.onerror=null;" usemap="#mp"><img
            hidefocus="true" id="s_lg_img_new" class="index-logo-srcnew"
            src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="270" height="129"
            onerror="this.src='//www.baidu.com/img/flexible/logo/pc/index@2.png';this.onerror=null;" usemap="#mp"><img
            hidefocus="true" id="s_lg_img_aging" class="index-logo-aging-tools"
            src="//www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png" width="270" height="129"
            onerror="this.src='//www.baidu.com/img/flexible/logo/pc/index@2.png';this.onerror=null;" usemap="#mp"><map
            name="mp"><area style="outline:none;" hidefocus="true" shape="rect" coords="0,0,270,129"
                href="//www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&amp;sa=ire_dl_gh_logo_texing&amp;rsv_dl=igh_logo_pcs"
                onmousedown="return ns_c({fm: 'tab', tab: 'felogo', rsv_platform: 'wwwhome' })" target="_blank"
                title="点击一下，了解更多" ns_c({&#39;fm&#39;:&#39;behs&#39;,&#39;tab&#39;:&#39;bdlogo&#39;})&quot;=""></map>
    </div>
    <div class="s-p-top">
        <ul>
            <li>1</li>
            <li>11</li>

            <li>12</li>
            <li>13</li>

        </ul>
    </div>
    <script>
        // 基本选择器
        // id class 标签名 name  其它选择器

        // var imgele = document.getElementById('s_lg_img');
        // console.log(imgele); // 如果存在id是s_lg_img的元素 返回这一个元素
        // // 如果不存在  null 
        // // id 是独一无二的  所以拿到的一定是一个元素 


        // var divele = document.getElementsByClassName('s-p-top');
        // console.log(divele); // 伪数组 有几个返回几个
        
        // // 上面得到的是一个伪数组 
        // // 如果我想用其中某一个元素 需要用下标取出这个元素
        // console.log(divele[1]);
        // var divele1 = document.getElementsByClassName('s-p-top666');
        // console.log(divele1); // HTMLCollection [] 如果不存在 返回空伪数组
        
        // var tagele = document.getElementsByTagName('area');
        // console.log(tagele);

        // // 通过下标取出元素 
        // console.log(tagele[0]);
        // var tagele1 = document.getElementsByTagName('area1');
        // console.log(tagele1);

        // 根据name属性获取  

        // var nameele = document.getElementsByName('mp');
        // console.log(nameele);
        // // // 通过下标取出元素 
        // console.log(nameele[0]);
        // var nameele1 = document.getElementsByName('mpdfafsdf');
        // console.log(nameele1);


        // 拿到符合要求的第一个元素  

        // var imgele = document.querySelector('#s_lg_img_new');

        // console.log(imgele);

        // var testele = document.querySelector('.index-logo-aging-tools');
        // console.log(testele)


        // var divele = document.querySelector('div');
        // console.log(divele)

        // var liele = document.querySelector('ul>li');
        // console.log(liele)


        //  var lieles = document.querySelectorAll('ul>li');
        //  console.log(lieles);

        //  for(var v of lieles){
        //     console.log(v);
        //  }



        // 上面都是在整个文档中查找   document.** 

        // 我们也可以 缩小范围 然后查找  

        // 比如先找到 父元素 然后在父元素中找子元素 

        // var parentEle = document.querySelector('#lg');
        // var childEle = parentEle.querySelectorAll('img');
        // console.log(childEle)
        // for(var v of childEle){
        //     console.log(v);
        // }
        // childEle.forEach(function(item){
        //     console.log(item)
        // });

        // var childEle = parentEle.getElementsByTagName('img');
        //  childEle.forEach(function(item){
        //     console.log(item)
        // });
        // 如果有id  首选id 查找
        // getElementById  效率高于 querySelector('#名字');


        // querySelectorAll 得到的伪数组 可以还用数组高级方法 
        // getElementsByTagName getElementsByClassName  getElementsByName 
    </script>
</body>

</html>